<template>
  <div class="product-detail">
      <el-row gutter="20">
          <el-col :span="12">
              <!-- 产品图片轮播 -->
              <el-carousel>
                  <el-carousel-item v-for="img in product.images" :key="img">
                      <img :src="img" alt="Product image" width="500" />
                  </el-carousel-item>
              </el-carousel>
          </el-col>
          <el-col :span="12">
              <!-- 产品详细信息 -->
              <h2>{{ product.name }}</h2>
              <p>{{ product.description }}</p>
              <ul>
                  <li v-for="(value, key) in product.specs" :key="key">{{ key }}: {{ value }}</li>
              </ul>
              <el-button type="primary" @click="addToCart">添加到购物车</el-button>
              <!-- 添加一个空的 div 来增加距离 -->
              <div style="height: 20px;"></div>
              <router-link to="/cart">查看购物车</router-link>
          </el-col>
      </el-row>
  </div>
</template>

<script setup>
import { useCartStore } from '../stores/cartStore';
import { useProductStore } from '../stores/productStore';
import { ref } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const productStore = useProductStore();
const cartStore = useCartStore();

// 根据路由参数获取对应的产品数据
const product = ref(null);
productStore.products.forEach((p) => {
  if (p.id === parseInt(route.params.id)) {
      product.value = p;
  }
});

// 添加到购物车
const addToCart = () => {
  cartStore.addItem({
      id: product.value.id,
      name: product.value.name,
      price: product.value.price,
      quantity: 1
  });
};
</script>

<style>.product-detail {
  margin-top: 30px; /* 适当增加与上方内容的间距 */
  padding: 30px; /* 增加内边距，使内容在容器内有更多空间 */
  background-color: #fff; /* 将背景色改为白色，与页面整体风格更协调 */
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); /* 加深阴影效果，使组件更有立体感 */
}

.el-row {
  margin-bottom: 30px; /* 增加行与行之间的间距 */
  display: flex;
  align-items: flex-start; /* 让列内的内容从顶部开始排列，而不是居中 */
}

.el-col {
  padding: 20px; /* 增加列内的内边距，使内容更舒展 */
  background-color: #f9f9f9; /* 列背景色设置为稍浅的灰色，与整体白色背景区分开，增加层次感 */
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  flex: 1; /* 让两列平均分配父元素的宽度，实现更灵活的布局 */
}

.el-carousel {
  margin-bottom: 20px; /* 增加轮播图与下方内容的间距 */
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.el-carousel-item img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  object-fit: cover; /* 让图片填充整个容器，裁剪多余部分，保持图片比例的同时填满空间 */
}

h2 {
  color: #333;
  margin-top: 0;
  font-size: 30px; /* 适当增大标题字体大小 */
  font-weight: bold;
}

p {
  color: #666;
  line-height: 1.6; /* 适当增加行间距，提高可读性 */
}

ul li {
  color: #666;
  margin-bottom: 10px; /* 增加规格列表项之间的间距 */
}

.el-button[type="primary"] {
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 12px 30px; /* 增加按钮的内边距，使其更醒目 */
  font-size: 18px; /* 适当增大字体大小 */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.el-button[type="primary"]:hover {
  background-color: #0056b3;
}

.router-link {
  color: #007BFF;
  text-decoration: none;
  font-size: 18px;
  margin-top: 15px; /* 增加与上方内容的间距 */
  display: inline-block;
  padding: 8px 15px; /* 调整内边距，使其与添加到购物车按钮在视觉上更协调 */
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.router-link:hover {
  background-color: #007BFF;
  color: white;
}
</style>